<script setup lang="ts">
import { reactive, watch } from 'vue'
import SFormItem from '@/components/common/info/SFormItem.vue'
import { useRoute } from 'vue-router'
import { ArrowDown, ArrowUp } from '@element-plus/icons-vue'

const route = useRoute()
const topButton = route.meta.topButton


const props = withDefaults(defineProps<{
  data: any
  statement: any
  methods: any
  formLoading: boolean
  showButton: boolean
}>(), {
  showButton: true,  // 设置 showButton 的默认值为 true
})

const expandedGroups = reactive<Record<number, boolean>>({})

watch(
  () => props.statement,
  (newIt, oldIt) => {
    if (oldIt === undefined) {
      props.statement.groups.forEach((_: any, index: number) => {
        expandedGroups[index] = true
      })
    }
  }
)

const toggleGroup = (index: number) => {
  expandedGroups[index] = !expandedGroups[index]
}

const isGroupExpanded = (index: number) => {
  return expandedGroups[index] === undefined || expandedGroups[index] === true
}
</script>

<template>
  <div v-if="props.statement === undefined" class="skeleton-container">
    <!-- Filter card skeleton -->
    <el-card class="skeleton-card">
      <el-skeleton :rows="3" animated />
    </el-card>

    <!-- Table skeleton -->
    <el-card class="skeleton-table">
      <el-skeleton :rows="6" animated :throttle="500" />
    </el-card>

    <!-- Pagination skeleton -->
    <div class="skeleton-pagination">
      <el-skeleton-item variant="button" style="width: 100px; height: 32px" />
    </div>
  </div>

  <template v-else>
    <div v-if="props.showButton" class="s-button-list">
      <el-button
        v-for="it in topButton"
        :type="it.btnType || 'primary'"
        :icon="it.icon === '#' ? '' : it.icon"
        :key="it.menuId"
        @click.stop="props.methods[it.component!]()"
        size="default"
        class="action-button"
      >
        {{ it.menuName }}
      </el-button>
    </div>
    <el-form :label-width="100" :rules="props.statement.rules" label-position="left">
      <el-card v-for="(it, index) in props.statement.groups" :key="index" class="info-card">
        <template #header>
          <div class="group-header">
            <span class="group-title">{{ it.groupName }}</span>
            <el-button
              :icon="isGroupExpanded(index) ? ArrowUp : ArrowDown"
              size="small"
              text
              class="expand-button"
              @click="toggleGroup(index)"
            />
          </div>
        </template>
        <el-collapse-transition>
          <div v-show="isGroupExpanded(index)" v-loading="formLoading">
            <el-row :gutter="24" v-for="(line, i) in it.data" :key="i">
              <template v-if="Array.isArray(line)">
                <el-col
                  :xs="24"
                  :sm="12"
                  :md="po.span === undefined ? 24 / line.length : po.span"
                  v-for="po in line.filter((fl: any) => fl.visible !== false)"
                  :key="po.property"
                >
                  <slot :name="po.property" :mate="po" :formItem="data">
                    <el-form-item :error="po.error" :label="po.label" :required="po.required">
                      <s-form-item :mate="po" :form="data" :change="props.methods[po.change]" />
                    </el-form-item>
                  </slot>
                </el-col>
              </template>
              <el-col v-else-if="line.visible !== false" :span="24">
                <slot :name="line.property" :mate="line" :formItem="data">
                  <el-form-item :error="line.error" :label="line.label" :required="line.required">
                    <s-form-item :mate="line" :form="data" :change="props.methods[line.change]" />
                  </el-form-item>
                </slot>
              </el-col>
            </el-row>
          </div>
        </el-collapse-transition>
      </el-card>
    </el-form>
  </template>
</template>

<style scoped>
.s-button-list {
  margin-bottom: 24px;
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.group-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

.group-title {
  color: var(--el-color-primary);
  font-weight: 600;
  font-size: 16px;
  display: flex;
  align-items: center;
  flex: 1;
}

.group-title::before {
  content: '';
  display: inline-block;
  width: 3px;
  height: 16px;
  background: var(--el-color-primary);
  margin-right: 8px;
  border-radius: 2px;
}

.expand-button {
  margin-left: 8px;
  color: var(--el-text-color-secondary);
  transition: color 0.2s ease;
}

.expand-button:hover {
  color: var(--el-color-primary);
}

:deep(.el-card__header) {
  padding: 16px 20px;
  background: linear-gradient(90deg, var(--el-color-primary-light-9), transparent);
  border-bottom: 1px solid var(--el-border-color-lighter);
}

:deep(.el-card__body) {
  padding: 20px;
  border: none;
}

:deep(.el-form-item) {
  margin-bottom: 20px;
}

:deep(.el-form-item__label) {
  font-weight: 500;
  color: var(--el-text-color-primary);
}

.info-card {
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  transition: box-shadow 0.2s ease;
  margin-bottom: 20px;
}

.info-card:last-child {
  margin-bottom: 0;
}

.info-card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* Skeleton styles */
.skeleton-container {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.skeleton-card {
  border-radius: 8px;
  box-shadow: none;
  border: none;
}

.skeleton-buttons {
  display: flex;
  gap: 12px;
  margin: 20px 0;
}

.skeleton-table {
  border-radius: 8px;
  box-shadow: none;
  overflow: hidden;
  border: none;
}

.skeleton-pagination {
  display: flex;
  justify-content: flex-end;
  margin-top: 20px;
}

.action-button {
  border-radius: 6px;
  font-weight: 500;
  transition: all 0.2s ease;
}

@media (max-width: 768px) {
  .s-button-list {
    justify-content: center;
  }

  :deep(.el-form-item__label) {
    font-size: 14px;
  }

  :deep(.el-card__header) {
    padding: 12px 16px;
  }

  :deep(.el-card__body) {
    padding: 16px;
  }
}
</style>
